<template>
  <div class="content">
    <div class="monitoring" v-if="firstCamera">
      <div class="camara_box">
        <div id="Player" class="camara_video"></div>
        <div v-if="firstCamera.name" class="error">{{ firstCamera.name }}</div>
      </div>
    </div>
    <div
      v-else
      style="
        height: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      "
    >
      <img
        :src="wugj"
        style="width: 120px; height: 120px; margin-bottom: 10px"
      />
      <div style="color: #d2e1fe; font-size: 0.7vw">无监控设备</div>
    </div>
  </div>
</template>

<script>
import { reqGetCamera, reqAlarmHandleResult } from "@/api/api";
import { mapState } from "vuex";
import EZUIKit from "ezuikit-js"; // ezuikit-js7.6.4

export default {
  props: ["frontDeviceRelatedVO2"],
  components: {},
  data() {
    return {
      frontDeviceRelatedVO: [],
      firstCamera: null, // 只存储第一个摄像机
      wugj: require("@assets/images/datav/wugj.png"),
      playerEZUIKit: null,
      accessToken: "",
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    frontDeviceRelatedVO2: {
      immediate: true,
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.frontDeviceRelatedVO = newVal;
          this.firstCamera = newVal[0]; // 只取第一个摄像机
          // this.getCamera();
        }
      }
    }
  },
  methods: {
    destroy() {
      if (this.playerEZUIKit) {
        var destroyPromise = this.playerEZUIKit.stop();
        destroyPromise = this.playerEZUIKit.destroy();
        destroyPromise.then((data) => {
          console.log("promise 获取 数据", data);
        });
        this.playerEZUIKit = null;
        console.log("销毁");
      }
    },
    // async getCamera() {
    //   await this.gettoken(); //萤石云
    // },

    async gettoken() {
      await this.destroy();
      fetch(
        `https://open.ys7.com/api/lapp/token/get?appKey=d6a1a4287b9a4d78adebaa7bbc8c7125&appSecret=6b9102e6b4ef80beb7067be13d08bd2c`,
        {
          method: "POST",
        }
      )
        .then((response) => response.json())
        .then((res) => {
          this.accessToken = res.data.accessToken;
          this.getPlay2();
        });
    },
    
    getPlay2() {
      if (this.firstCamera) {
        this.getaddress(this.firstCamera);
      }
    },
    
    getaddress(data) {
      fetch(
        `https://open.ys7.com/api/lapp/v2/live/address/get?accessToken=${this.accessToken}&deviceSerial=${data.sn}&supportH265=1&quality=2`,
        {
          method: "POST",
        }
      )
        .then((response) => response.json())
        .then((res) => {
          this.$notify.closeAll();
          if (res.code != 200) {
            this.firstCamera = {
              ...this.firstCamera,
              name: res.msg
            };
            return;
          }
          
          let playerEZUIKit = new EZUIKit.EZUIKitPlayer({
            id: "Player", // 使用固定ID
            accessToken: this.accessToken,
            url: res.data.url,
            useHardDev: true,
            template: "44d2c3c3a41a461da5f7a2c925ca1d28",
            plugin: ["talk"],
          });
          
          this.playerEZUIKit = playerEZUIKit;
        });
    }
  },
  beforeDestroy() {
    this.destroy();
  }
};
</script>

<style lang="less" scoped>
/* 样式保持不变 */
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.content {
  width: 100%;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;

  .monitoring {
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    margin-top: 15px;

    > div {
      width: 100%;
      height: 100%;

      .camara_box {
        height: 100%;
        background: black;
        position: relative;
        width: 100%;
        border: 1px solid #073272;
        box-sizing: border-box;

       
        .camara_video {
          z-index: 1;
          width: 100%;
          height: 100%;
        }

        .deviceId {
          width: calc(100% - 20px);
          color: #e9e9e9;
          position: absolute;
          top: 4%;
          padding: 0 10px;
          flex-wrap: nowrap;
          z-index: 2;

          .spaceName {
            color: #e9e9e9;
            white-space: wrap;
            margin-bottom: 5px;
          }
        }

        .error {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 0;
          color: red;
          .fontSize(15);
        }

        .none {
          color: #cfd3ec38;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 0;
        }
      }
         
    }
  }
}

::v-deep .el_button.el-button {
  background: transparent !important;
  border: transparent !important;
}
</style>